import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { PageHeader, Table, Space, Button, Modal, Tag } from 'antd'
import {
  ExclamationCircleOutlined
 } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { confirm } = Modal;

export default function Auditlist() {
  let {username} = JSON.parse(localStorage.getItem('token'));
  const [dataSource, setDataSource] = useState([]);
  const colorList = ['black', 'orange', 'green', 'red'];
  const auditList = ['草稿箱', '审核中', '已通过', '未通过'];
  const navigate = useNavigate();

  useEffect(()=>{
    axios(`/news?author=${username}&publishState_lte=1&auditState_ne=0&_expand=category`).then(res =>{
      console.log(res.data);
      setDataSource(res.data);
    })
  },[username])
  const columns = [
    {
      title: '新闻标题',
      dataIndex: 'title',
      render:(title, item)=>{
        // eslint-disable-next-line jsx-a11y/anchor-has-content
        return (
          <a href={`/sandbox/news/preview/${item.id}`}>{title}</a>
        )
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render:(category) => {
        return category.title;
      }
    },
    {
      title: '审核状态',
      dataIndex: 'auditState',
      render: (auditState) => (
        <>
          <Tag color={colorList[auditState]}>
            {auditList[auditState]}
          </Tag>
        </>
      ),
    },
    {
      title: '操作',
      dataIndex: 'auditState',
      render:(auditState, item) => {
        return (
          <Space size="middle">
            {auditState === 1 && 
             <Button danger type='primary' size='small'  onClick={()=>{
              deletenews(item)
             }}
            >撤 销</Button>}
            {auditState === 2 && 
             <Button type='primary' size='small' onClick={()=>{
              publishnews(item)
             }}
            >上 线</Button>}
            {auditState === 3 && 
             <Button size='small'  onClick={()=>{
              navigate(`/sandbox/news/update/${item.id}`); 
             }}
            >修 改</Button>}
          </Space>
        )
      }
    },
  ];
  const deletenews = (item) =>{
    confirm({
      title: '您确定要撤销这条新闻吗？',
      icon: <ExclamationCircleOutlined />,
  
      onOk() {
        let list = dataSource;
          list = list.filter((data)=> data.id !== item.id)
          setDataSource(list);
          axios({
            url:`/news/${item.id}`,
            method:'patch',
            data:{
              auditState:0
            }
          })
      },

      onCancel() {
        console.log('Cancel');
      },
    })
  }

  const publishnews = (item) =>{
    confirm({
      title: '准备上线了哦！您确定吗？',
      icon: <ExclamationCircleOutlined />,
  
      onOk() {
        let list = dataSource;
          list = list.filter((data)=> data.id !== item.id)
          setDataSource(list);
          axios.patch(`/news/${item.id}`,{
            publishState:1,
            publishTime:Date.now()
          })
      },

      onCancel() {
        console.log('Cancel');
      },
    })
  }

  return (
    <div>
      <PageHeader
        className="site-page-header"
        title="审核列表"
      />
      <Table dataSource={dataSource} columns={columns} rowKey={item => item.id}/>
    </div>
  )
}
